<template>
  <el-tabs v-model="activeName" stretch class="active-docs-and-issues-tabs">
    <el-tab-pane label="最新资源" name="docs">
      <active-docs />
    </el-tab-pane>
    <el-tab-pane label="最新问题" name="issues">
      <active-issues />
    </el-tab-pane>
  </el-tabs>
</template>

<script>
import ActiveDocs from './active-docs';
import ActiveIssues from './active-issues';

export default {
  name: 'active-docs-and-issues', // 最新资源和最新问题
  components: { ActiveDocs, ActiveIssues },
  data() {
    return {
      activeName: 'docs',
    };
  },
};
</script>

<style lang="scss">
.active-docs-and-issues-tabs {
  display: flex;
  flex-direction: column;

  .el-tabs__item {
    height: unset;
    font-size: 1rem;
    line-height: 1.2;
    margin: 0;
    padding: 1.25rem 0 0.625rem;
    color: #606266;

    &.is-active {
      font-weight: 600;
      color: #2e2e2e;
    }
  }

  .el-tabs__active-bar {
    z-index: 3;
    bottom: -1px;
    height: 1px;
  }
  .el-tabs__nav-wrap {
    display: flex;

    &::after { height: 0; }
    .el-tabs__nav-scroll {
      flex: 1;

      .el-tabs__nav { border-bottom: 1px solid #C0C4CC; }
    }
  }
}
</style>
